<template>
  <div>
      <div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                  <i class="el-icon-lx-calendar"></i> 财务管理
              </el-breadcrumb-item>
              <el-breadcrumb-item>支付宝对账单</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="container">
          <div class="handle-box">
              <el-row>
                  <el-col :span="4">
                      <el-date-picker
                              v-model="query.start_time"
                              type="datetime"
                              placeholder="开始时间">
                      </el-date-picker>
                  </el-col>
                  <el-col :span="4">
                      <el-date-picker
                              v-model="query.end_time"
                              type="datetime"
                              placeholder="结束时间">
                      </el-date-picker>
                  </el-col>
                  <!-- <el-col :span="3" style="margin-left: 3%">
                      <el-select v-model="query.platform" placeholder="支付平台">
                          <el-option label="全部" value=""></el-option>
                          <el-option label="支付宝" value="alipay"></el-option>
                          <el-option label="微信" value="wechat"></el-option>
                      </el-select>
                  </el-col> -->
                  <!-- <el-col :span="3">
                      <el-select
                              v-model="query.business_type"
                              placeholder="业务类型"
                              class="handle-select mr10"
                      >
                          <el-option label="全部类型" value=""></el-option>
                          <el-option label="交易" value="交易"></el-option>
                          <el-option label="退款" value="退款"></el-option>
                      </el-select>
                  </el-col> -->

                  <el-col :span="4" style="margin-left: 6%;display: flex;">
                      <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                      <el-button type="primary" @click="queryReset">重置</el-button>
                      <el-button type="primary" icon="el-icon-download" @click="exportSource">导出数据</el-button>
                  </el-col>
              </el-row>
          </div>
          <el-table
              id="repottable"
              :data="tableData"
              v-loading="loading"
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
              @selection-change="handleSelectionChange"
          >
              <el-table-column type="selection" width="55" align="center"></el-table-column>
              <el-table-column 
                label="序号" 
                width="55" 
                align="center">
                <template slot-scope="scope">
                  {{ (query.page - 1) * query.pageSize + scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="merchant_order_id" label="商户订单号" width="180" align="center"></el-table-column>
              <!-- <el-table-column prop="platform" label="支付平台" width="100" align="center">
                  <template slot-scope="scope">
                      <el-tag :type="scope.row.platform === 'alipay' ? 'success' : 'primary'">
                          {{ scope.row.platform === 'alipay' ? '支付宝' : '微信' }}
                      </el-tag>
                  </template>
              </el-table-column> -->
              <el-table-column prop="business_type" label="业务类型" width="100" align="center"></el-table-column>
              <el-table-column prop="product_name" label="商品名称" width="150" align="center"></el-table-column>
              <el-table-column prop="income" label="收入" width="80" align="center">
                  <template slot-scope="scope">
                      {{ scope.row.income }}
                  </template>
              </el-table-column>
              <el-table-column prop="disburse" label="支出" width="80" align="center">
                  <template slot-scope="scope">
                      {{ scope.row.disburse }}
                  </template>
              </el-table-column>
              <el-table-column prop="balance" label="余额" width="80" align="center">
                  <template slot-scope="scope">
                     {{ scope.row.balance }}
                  </template>
              </el-table-column>
              <el-table-column prop="completion_time" label="完成时间" width="160" align="center">
                <template slot-scope="scope">
                      {{ scope.row.completion_time }}
                  </template>
              </el-table-column>
              <el-table-column prop="counterparty_account" label="对方账号" width="150" align="center"></el-table-column>
              <el-table-column prop="transaction_id" label="交易号" width="180" align="center"></el-table-column>
              <el-table-column prop="remark" label="备注" width="150" align="center"></el-table-column>
          </el-table>
          <div class="pagination">
              <el-pagination
                  background
                  layout="total, prev, pager, next, sizes"
                  :page-sizes="[10, 20, 50, 100, 500, 1000]"
                  @size-change="handleSizeChange"
                  :current-page="query.page"
                  :page-size="query.pageSize"
                  :total="pageTotal"
                  @current-change="handlePageChange"
              ></el-pagination>
          </div>
      </div>
  </div>
</template>

<script>
export default {
name: 'payment_statement',
data() {
  return {
    query: {
      page: 1,
      pageSize: 10,
      platform: '',
      business_type: '',
      start_time: '',
      end_time: ''
    },
    InfoVisible: false,
    order_info: {},
    loading: false,
    tableData: [],
    multipleSelection: [],
    pageTotal: 0,
    delList: [],
    idx: -1,
    id: -1,
    //获取列表请求
    getList: function() {
      let that = this;
      this.api.get('paymentStatement-page', this.query, res => {
        that.tableData = res.data.list;
        that.query.page = res.data.page;
        that.query.pageSize = res.data.pageSize;
        that.pageTotal = res.data.pageTotal;
      }, undefined, undefined, this);
    }
  };
},
created() {
  this.getList();
},
methods: {
  // 重置查询条件
  queryReset() {
    this.query = {
      page: 1,
      pageSize: 10,
      platform: '',
      business_type: '',
      start_time: '',
      end_time: ''
    };
    this.getList();
  },
  // 触发搜索按钮
  handleSearch() {
    this.$set(this.query, 'page', 1);
    this.getList();
  },
  exportSource() {
    this.api.exportExcel(document.querySelector('#repottable'), '支付宝对账单数据表');
  },
  handleSizeChange(val) {
    this.query.pageSize = val;
    this.getList();
  },
  InfoView(index, row) {
    this.order_info = row;
    this.InfoVisible = true;
  },
  // 多选操作
  handleSelectionChange(val) {
    this.multipleSelection = val;
  },
  // 删除操作
  handleDelete(index, row) {
    this.delLists([row.id], '删除成功');
  },
  // 分页导航
  handlePageChange(val) {
    this.$set(this.query, 'page', val);
    this.getList();
  }
}
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 150px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.gl_t{
  font-weight: bold;
}
</style>